---
name: 按钮 button
route: /button
---

import { Playground, PropsTable } from 'docz'
import Button from './index.js'
import Icon from '../icon/index.js'

import './index.scss'

# 按钮

欲把西湖比西子，`淡妆浓抹`总相宜

## 代码演示

### 默认

<Playground>
  <Button>靛青</Button>
</Playground>

### 颜色

<Playground>
  <Button type='primary' outline>黛色</Button>
  <Button type='primary'>黛色</Button>
  <Button type='success' outline>竹青</Button>
  <Button type='success'>竹青</Button>
  <Button type='danger' outline>胭脂</Button>
  <Button type='danger'>胭脂</Button>
</Playground>

### 大小

<Playground>
  <Button type='primary' size='large'>大按钮</Button>
  <Button type='success' outline>中按钮</Button>
  <Button type='danger' size='small'>小按钮</Button>
</Playground>

### 形状

<Playground>
  <Button type='primary' size='large' round>大按钮</Button>
  <Button type='success' outline round>中按钮</Button>
  <Button type='danger' size='small' round>小按钮</Button>
</Playground>

### Block

<Playground>
  <Button block>块</Button>
  <Button type='primary' round block>块</Button>
  <Button type='success' block>块</Button>
  <Button type='danger' round block>块</Button>
</Playground>

### Kong
<Playground>
  <Button kong="muyun">暮云</Button>
  <Button kong="yuanshan">远山</Button>
  <Button kong="mei">莓红</Button>
</Playground>

### 链接

<Playground>
  <Button type='primary' href='https://github.com/zhui-team/zhui'>链接跳转</Button>
  <Button type='success' size='large' href='https://github.com/zhui-team/zhui' target='_blank' round>打开窗口</Button>
</Playground>

### 禁用

<Playground>
  <Button disabled>不可用</Button>
</Playground>

### 加载

<Playground>
  <Button loading>加载</Button>
  <Button type='primary' loading>加载</Button>
  <Button type='danger' loading round>加载</Button>
</Playground>

### 图标按钮

<Playground>
  <Button><Icon type='music' />音乐</Button>
  <Button type='danger' outline round><Icon type='message' />消息</Button>
</Playground>

### 按钮组

你可以将不同形状的按钮组合

<Playground>
  <Button.Group>
    <Button round>左</Button>
    <Button>中</Button>
    <Button round>右</Button>
  </Button.Group>
</Playground>

## 属性

<PropsTable of={Button} />
